import { PropsWithChildren } from 'react';
import { useDraggable } from '@dnd-kit/core';
import { ScrollableStyle, ItemStyle } from './style';

function Draggable(props: PropsWithChildren<{ id: string }>) {
	const { attributes, listeners, isDragging, setNodeRef } = useDraggable({
		id: props.id,
		data: { comId: props.id }
	});

	return (
		<li ref={setNodeRef} {...listeners} {...attributes}>
			<ItemStyle style={{ opacity: isDragging ? '0.5' : '1' }}>元素 {props.children}</ItemStyle>
		</li>
	);
}

export default Draggable;
